<template>
  <div class="app-container home">
    <div class="bg-header">
      <div class="bg-container">
        <div class="bg-top">任务概览</div>
        <div class="bg-bottom">
          <ul class="list">
            <li class="item">
              <div class="item-top">
                {{ ownTotal }}
                <div class="small-text">个</div>
              </div>
              <div class="item-bottom">我的工单</div>
            </li>
            <li class="item">
              <div class="item-top">
                {{ toDoTotal }}
                <div class="small-text">个</div>
              </div>
              <div class="item-bottom">待办工单</div>
            </li>
            <!-- <li class="item">
              <div class="item-top">
                {{ claimTotal }}
                <div class="small-text">个</div>
              </div>
              <div class="item-bottom">待签工单</div>
            </li> -->
            <li class="item">
              <div class="item-top">
                {{ finishedTotal }}
                <div class="small-text">个</div>
              </div>
              <div class="item-bottom">已办工单</div>
            </li>
          </ul>
        </div>
      </div>
      <!-- <div class="noticed">
        <div class="noticed-title">公告</div>
        <div class="scollor">
          <ul
            class="infinite-list"
            v-infinite-scroll="load"
            style="overflow: auto"
          >
            <li
              v-for="item in noticeList"
              class="infinite-list-item scollor-item"
            >
              <div class="item-right">
                <div class="right-point"></div>
                <div class="right-text" v-html="item.noticeContent"></div>
              </div>
              <div class="item-left">{{ item.createTime }}</div>
            </li>
          </ul>
          <div class="scollor-item" v-for="i in 8" :key="i">
            <div class="item-right">
              <div class="right-point"></div>
              <div class="right-text">系统升级！</div>
            </div>
            <div class="item-left">2023-09-08</div>
          </div>
        </div>
      </div> -->
    </div>
    <div class="table-wrap">
      <div class="left" style="width: 48%">
        <!-- <div class="btn" style="margin: 10px 0">
          <el-button
            type="primary"
            round
            plain
            size="mini"
            style="margin-right: 10px"
            @click="getList"
            :class="{ active: type == 'todo' }"
            >待办工单</el-button
          >
          <el-button
            type="primary"
            round
            plain
            size="mini"
            @click="getListclaim"
            :class="{ active: type == 'claim' }"
            >待签工单</el-button
          >
        </div> -->

        <div class="btn" style="margin: 10px 0">
          <div class="btn-wrap">
            <div class="btn-name">
              <span style="margin-right: 10px; margin: 10px" @click="getList1" class="title-style"
                :class="{ active: type == 'todo' }">待办工单</span>
              <span class="line" v-if="type == 'todo'"></span>
            </div>
            <!-- <div class="btn-name">
              <span style="margin: 10px" @click="getListclaim" class="title-style"
                :class="{ active: type == 'claim' }">待签工单</span>
              <span class="line" v-if="type == 'claim'"></span>
            </div> -->
          </div>

          <!-- <el-button type="primary" round plain size="mini" style="margin-right:10px" @click="getListOwn" :class="{'active':typeRight=='own'}">我的工单</el-button>
            <el-button type="primary" round  plain size="mini" @click="getListFinish" :class="{'active':typeRight=='finish'}">已办工单</el-button>     -->
        </div>

        <el-table :data="todoList" border>
          <el-table-column type="index" width="50" align="center" label="序号" :resizable="false" />
          <el-table-column label="工单编号" align="center" prop="businessKey" :show-overflow-tooltip="true" width="180">
            <template slot-scope="scope">
              <el-link type="primary" @click="handleProcess(scope.row, 'left')">{{ scope.row.businessKey }}</el-link>
            </template>
          </el-table-column>
          <el-table-column label="工单大类" align="center" prop="categoryName" width="100" />
          <el-table-column label="工单子类" align="center" prop="subCategoryName" />
          <el-table-column label="当前节点" align="center" prop="taskName" width="100"><template slot-scope="scope">{{scope.row.workState === '3' || scope.row.workState === '4' || scope.row.workState === '5' ? '结束' : scope.row.taskName}}</template></el-table-column>
          <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100"
            :resizable="false">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-edit-outline" @click="handleProcess(scope.row, 'left')"
                v-hasPermi="['workflow:process:approval']"><span v-if="type == 'todo'">办理</span>
                <span v-else>签收</span>
              </el-button>
            </template>
          </el-table-column> -->
        </el-table>
      </div>

      <div class="right" style="width: 48%">
        <div class="btn" style="margin: 10px 0">
          <div class="btn-wrap">
            <div class="btn-name">
              <span style="margin-right: 10px; margin: 10px" @click="getListOwn" class="title-style"
                :class="{ active: typeRight == 'own' }">我的工单</span>
              <span class="line" v-if="typeRight == 'own'"></span>
            </div>
            <div class="btn-name">
              <span style="margin: 10px" @click="getListFinish" class="title-style"
                :class="{ active: typeRight == 'finish' }">已办工单</span>
              <span class="line" v-if="typeRight == 'finish'"></span>
            </div>
          </div>

          <!-- <el-button type="primary" round plain size="mini" style="margin-right:10px" @click="getListOwn" :class="{'active':typeRight=='own'}">我的工单</el-button>
            <el-button type="primary" round  plain size="mini" @click="getListFinish" :class="{'active':typeRight=='finish'}">已办工单</el-button>     -->
        </div>
        <el-table :data="todoListRight" border>
          <el-table-column type="index" width="50" align="center" label="序号" />
          <el-table-column label="工单编号" align="center" prop="businessKey" :show-overflow-tooltip="true"  width="180">
            <template slot-scope="scope">
              <el-link type="primary" @click="handleProcess(scope.row, 'right')">{{ scope.row.businessKey }}</el-link>
            </template>
          </el-table-column>
          <el-table-column label="工单大类" align="center" prop="categoryName" :formatter="categoryFormat" width="100" />
          <el-table-column label="工单子类" align="center" prop="subCategoryName" />
          <el-table-column v-if="typeRight === 'finish'" label="办理节点" align="center" prop="taskName"><template slot-scope="scope">{{scope.row.taskName}}</template></el-table-column>
          <el-table-column v-else label="当前节点" align="center" prop="taskName" width="100"><template slot-scope="scope">{{scope.row.workState === '3' || scope.row.workState === '4' || scope.row.workState === '5' ? '结束' : scope.row.taskName}}</template></el-table-column>
          <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100"
            :resizable="false">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-edit-outline" @click="handleProcess(scope.row, 'right')"
                v-hasPermi="['workflow:process:approval']"><span>详情</span>
              </el-button>
            </template>
          </el-table-column> -->
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { getIndexData, listAllCategory } from "@/api/workflow/category";
import { listNotice } from "@/api/system/notice";
import {
  listTodoProcess,
  listClaimProcess,
  listOwnProcess,
  listFinishedProcess,
  detailProcess
} from "@/api/workflow/process";
import { claimTask } from '@/api/workflow/task';

import moment from "moment";

export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "1.0.0",
      ownTotal: "0",
      toDoTotal: "0",
      claimTotal: "0",
      finishedTotal: "0",
      copyTotal: "",
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 5
      },
      noticeList: [],
      // 遮罩层
      loading: true,
      // 流程待办任务表格数据
      todoList: [],
      todoListRight: [],
      // 日期范围
      dateRange: [],
      type: "todo",
      typeRight: "own",
      categoryOptions: [],
    };
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    getData() {
      // this.loading = true;
      // getIndexData().then((response) => {
      //   this.ownTotal = response.data.ownTotal;
      //   this.toDoTotal = response.data.toDoTotal;
      //   this.claimTotal = response.data.claimTotal;
      //   this.finishedTotal = response.data.finishedTotal;
      //   this.copyTotal = response.data.copyTotal;
      //   this.loading = false;
      // });

      listFinishedProcess(this.queryParams).then((response) => {
        this.finishedTotal = response.total
      });
    },
    /** 查询公告列表 */
    getList() {
      this.loading = true;
      listNotice(this.queryParams).then((response) => {
        // for (let index = 0; index < response.rows.length; index++) {
        //   item.createTime = moment(item.createTime).format('YYYY-MM-DD')
        // }
        response.rows.forEach((item) => {
          item.createTime = moment(item.createTime).format("YYYY-MM-DD");
        });
        this.noticeList = response.rows;
        this.noticeList[0].noticeContent =
          "本系统将于2023-12-01日晚上22:00进行系统升级。";
        this.noticeList[2].noticeContent =
          "理赔工单于2023-12-01日进行了流程调整，请大家注意！";
        this.loading = false;
      });
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
    getList1() {
      this.type = "todo";
      this.loading = true;
      listTodoProcess(this.addDateRange(this.queryParams, this.dateRange)).then(
        (response) => {
          this.todoList = response.rows;
          this.toDoTotal = response.total
          this.loading = false;
        }
      );
    },
    getListclaim() {
      this.type = "claim";
      this.loading = true;
      listClaimProcess(
        this.addDateRange(this.queryParams, this.dateRange)
      ).then((response) => {
        this.todoList = response.rows;
        this.claimTotal = response.total
        this.loading = false;
      });
    },
    /** 查询流程定义列表 */
    getListOwn() {
      this.typeRight = "own";
      this.loading = true;
      listOwnProcess(this.addDateRange(this.queryParams, this.dateRange)).then(
        (response) => {
          this.todoListRight = response.rows;
          this.ownTotal = response.total
          this.loading = false;
        }
      );
    },
    getListFinish() {
      this.typeRight = "finish";
      this.loading = true;
      listFinishedProcess(this.queryParams).then((response) => {
        this.todoListRight = response.rows;
        this.finishedTotal = response.total
        this.loading = false;
      });
    },
    // 跳转到处理页面
    handleProcess(row, code) {
      if (code == "left") {
        if (this.type == "todo") {
          const params = { 'procInsId': row.procInsId, 'taskId': row.taskId }
          detailProcess(params).then(res => {
            this.isHandling = false
            const data = res.data;
            let historyProcNodeList = data.historyProcNodeList;
            if (historyProcNodeList && Array.isArray(historyProcNodeList) && historyProcNodeList.length <= 2) {
              // 开始暂存页面
              this.$router.push({
                path: '/workflow/process/start/' + row.deployId,
                query: {
                  definitionId: row.procDefId,
                  procInsId: row.procInsId,
                  taskId: row.taskId,
                  categoryId: row.categoryId,
                  subCategoryId: row.subCategoryId,
                  'cur_category': row.categoryName,
                  'cur_subcategory': row.subCategoryName,
                  'cur_businessKey': row.businessKey,
                  'category': row.category,
                  'subCategory': row.subCategory
                }
              })
            } else {
              // 办理页面
              this.$router.push({
                path: '/workflow/process/detail/' + row.procInsId,
                query: {
                  taskId: row.taskId,
                  processed: true,
                  categoryId: row.categoryId,
                  subCategoryId: row.subCategoryId,
                  'cur_category': row.categoryName,
                  'cur_subcategory': row.subCategoryName,
                  'cur_businessKey': row.businessKey,
                  'category': row.category,
                  'subCategory': row.subCategory
                }
              })
            }
          })
        } else {
          claimTask({ taskId: row.taskId }).then((response) => {
            this.$modal.msgSuccess(response.msg);
            this.$router.push({
              path: "/work/todo",
            });
          });
        }
      } else {
        if (this.typeRight == "own") {
          this.$router.push({
            path: "/workflow/process/detail/" + row.procInsId,
            query: {
              processed: false,
              routeType: 'own',
              workState: row.workState,
              cur_businessKey: row.businessKey,
              taskId: row.taskId,
              superProcInsId: row.superProcInsId,
              deployId: row.deployId,
              definitionId: row.procDefId,
              procInsId: row.procInsId
            },
          });
        } else {
          this.$router.push({
            path: "/workflow/process/detail/" + row.procInsId,
            query: {
              processed: false,
            },
          });
        }
      }
    },
    categoryFormat(row) {
      if (row && row.categoryName) {
        return row.categoryName
      }
      return this.categoryOptions.find(k => k.code === row.category)?.categoryName ?? '';
    },
    /** 查询流程分类列表 */
    getCategoryList() {
      listAllCategory().then(response => this.categoryOptions = response.data)
    },
  },
  created() {
    this.getCategoryList()
  },
  mounted() {
    this.getData();
    // this.getList();
    this.getList1();
    this.getListOwn();
  },
};
</script>

<style scoped lang="scss">
.home {
  .el-table {
    border-radius: 10px;
  }

  .title-style {
    width: 64px;
    height: 22px;
    font-size: 16px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 22px;
    cursor: pointer;
  }

  .active {
    // background: red;
    width: 80px;
    height: 28px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: #2a2a2a;
    line-height: 28px;
    text-align: center;
    cursor: pointer;
  }

  .table-wrap {
    display: flex;
    justify-content: space-between;
  }

  .btn-wrap {
    display: flex;
    align-items: center;

    // justify-content: center;
    .line {
      width: 40px;
      height: 4px;
      background: #126cfd;
      border-radius: 2px;
    }

    .btn-name {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }

  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}

.bg-header {
  display: flex;
  padding-top: 10px;
  justify-content: space-between;
}

.bg-container {
  width: 100%;
  height: 200px;
  background: #126cfd;
  border-radius: 16px;
  padding: 20px;
}

.noticed {
  width: 28%;
  height: 200px;
  background: linear-gradient(334deg, #fafaff 0%, #f5fcff 46%, #f2f7ff 100%);
  border-radius: 16px;
  overflow: hidden;

  .noticed-title {
    padding: 20px;
    font-size: 20px;
    font-weight: 700;
    color: #333333;
  }
}

.bg-top {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  line-height: 28px;
}

.bg-bottom {
  padding: 0 60px;
  height: 140px;
  overflow-y: auto;

  .list {
    margin-top: 30px;
    height: 85px;
    display: flex;
    justify-content: space-between;

    .item {
      .item-top {
        position: relative;
        display: flex;
        font-size: 48px;
        font-weight: 400;
        color: #ffffff;

        .small-text {
          position: absolute;
          width: 20px;
          bottom: 8px;
          right: -10px;
          font-size: 16px;
        }
      }

      .item-bottom {
        font-size: 16px;
        font-weight: 400;
        color: #ffffff;
      }
    }
  }
}

.scollor {
  height: 140px;
  padding: 12px 20px 0px;
  overflow-y: auto;

  .scollor-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    align-items: center;
  }

  .item-right {
    display: flex;
    width: 300px;
    align-items: center;
    width: 300px;
    font-size: 14px;

    .right-text {
      // display: block;
      width: 300px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .item-lef {
      font-size: 14px;
    }

    .right-text {
      // width: 300px;
    }

    .right-point {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background-color: #f51b1b;
      margin-right: 3px;
    }
  }
}
</style>
